<template>
  <div class="c-login">
    <div class="c-center">
      <div class="c-c-left">
        <img @click="$router.push({path:'/'})" src="../../assets/img/photo.jpg" alt />
        <div>
          <p>用户名</p>
          <el-input v-model="account" placeholder="用户名"></el-input>
        </div>
        <div>
          <p>密码设置</p>
          <div><el-input class="c-inputs" v-model="password" placeholder="请输入6-18位字母与数字组合"></el-input>
          <el-input v-model="confirmPassword" placeholder="请再次输入密码"></el-input></div>
        </div>
        <div>
          <el-input v-model="invitationCode" placeholder="邀请码"></el-input>
          <p><el-checkbox-group v-model="agree">
      <el-checkbox label="我已阅读相关条款" name="agree"></el-checkbox>
    </el-checkbox-group></p>
        </div>
        <div class="c-c-l-btn">
          <el-button :loading="load" @click.native="login" type="primary">注册</el-button>
        </div>
      </div>
      <div class="c-c-right">
        <p>注册</p>
        <p>register</p>
        <p>
          已有账号，
          <span @click="$router.push({path:'/login'})" style="color:#D2D0AE;cursor:pointer">登录！</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { userRegister } from "../../api/api";
import qs from "qs";
import { format } from "highcharts";
export default {
  name: "login",
  data() {
    return {
      account: "",
      password: "",
      confirmPassword:"",
      invitationCode:"",
      load: false,
      agree:""
    };
  },
  created() {},
  mounted() {},
  watch:{
    agree(){
      // console.log(this.agree,666)
    }
  },
  methods: {
    login() {
      
      if (this.account == "" || this.password == "" || this.confirmPassword == "" || this.invitationCode == "") {
        this.$notify({
          title: "警告",
          message: "请输入正确的注册信息！",
          type: "warning"
        });
        return false;
      }
      if(!this.agree){
        this.$notify({
          title: "警告",
          message: "请认真阅读相关条款并勾选！",
          type: "warning"
        });
        return false;
      }
      this.load = true;
      var parmas = {
        account: this.account,
        password: this.password,
        confirmPassword:this.confirmPassword,
        invitationCode:this.invitationCode
      };
      userRegister(qs.stringify(parmas)).then(res => {
        this.load = false;
        if (res.data.code == 200) {
          this.$notify({
            title: "提示",
            message: '注册成功！',
            type: "success"
          });
          this.$router.push({ path: "/login" });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    }
  }
};
</script>
<style lang='less' scope>
.c-login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url("../../assets/img/l1-beijing.png") no-repeat;
  background-size: cover;
  .c-center {
    max-width: 1100px;
    margin: 200px auto;
    // border: 1px solid red;
    position: relative;
    .c-c-left {
      width: 800px;
      background-color: #fff;
      padding: 50px 140px 30px 100px;
      position: relative;
      > img:nth-of-type(1) {
        margin-bottom: 40px;
        cursor: pointer;
      }
      >div:nth-of-type(2){
          >div{
              display: flex;
              .c-inputs{
                  margin-right: 20px;
              }
            }
      }
      >div:nth-of-type(3){
          >p{
              margin-top: 10px;
              font-size: 14px;
              color: #A1B1B0;
          }
      }
      > div {
        font-size: 16px;
        color: #334d50;
        margin-bottom: 30px;
        > p {
          margin-bottom: 15px;
        }
      }
      > .c-c-l-btn {
        position: absolute;
        bottom: -50px;
        // .el-button {
        //   border-radius: 40px;
        //   padding: 10px 60px;
        // }
        .el-button--primary {
          background-color: #0a9187;
          border-color: #0a9187;
        }
      }
    }
    .c-c-right {
      position: absolute;
      left: 750px;
      top: 80px;
      background-color: #0a9187;
      color: #fff;
      padding: 80px 30px 50px;
      > p {
        font-size: 22px;
        margin-bottom: 15px;
      }
      > p:nth-of-type(2) {
        font-size: 26px;
        
      }
      > p:nth-of-type(3) {
        font-size: 14px;
        margin-top: 30px;
        margin-bottom: 0;
      }
    }
  }
}
</style>